<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header">
    <style type="text/css">
        .menu {
            width: 250px;
            height: 100%;
            position: fixed;
            background-color: seagreen;
            -webkit-transition: all 1s;
            transition: all 1s;
            left: 0;
            z-index: 50;
            overflow-y: auto;
            padding-bottom: 100px;
        }
        .menu.closed {
            left: -250px;
        }
        #toggle {
            background-color: seagreen;
            height: 100%;
            min-height: 100%;
            width: 50px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0px;
            z-index: 25;
            -webkit-transition: all 0.7s ease;
            transition: all 0.7s ease;
        }
        #toggle:hover {
            cursor: pointer;
        }
        #toggle.closed {
            left: 0px;
            top: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            opacity: 0.3;
        }
        .content {
            width: 100%;
            height: 100%;
            margin-left: 0px;
            -webkit-transition: all 0.4s;
            transition: all 0.4s;
        }
        .content.closed .text {
            -webkit-transform: translateX(80px);
            -ms-transform: translateX(80px);
            transform: translateX(80px);
        }
        .text {
            width: 60%;
            margin: auto;
            -webkit-transition: all 1s;
            transition: all 1s;
            margin-top: 80px;
            margin-bottom: 80px;
        }
        h1,
        h2 {
            color: #444;
        }
        p {
            color: #444;
        }
        p img {
            float: left;
            margin: 15px;
        }
        .menu ul {
            list-style-type: none;
            padding: 0;
            margin: 85px 0 0 40px;
            padding-right: 40px;
        }
        .menu ul li {
            color: floralwhite;
            font-size: 20px;
            margin: 0 0 5px 0;
            display: block;
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }
        .menu ul li:hover {
            background-color: #3bb16f;
            cursor: pointer;
        }
        #wrapper {
            height: 100%;
            min-height: 100%;
            position: fixed;
            overflow-y: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #wrapper.closed {
            position: fixed;
        }
        hr {
            border: none;
            height: 1px;
            background-color: seagreen;
            position: relative;
            width: 90%;
            margin-left: 0;
        }
        hr:before {
            content: "/";
            display: block;
            top: -8px;
            left: -5px;
            position: absolute;
            color: seagreen;
        }
        *::-moz-selection {
            background-color: #1b5233;
            color: floralwhite;
        }
        *::selection {
            background-color: #1b5233;
            color: floralwhite;
        }
    </style>
</head>
<link rel="stylesheet" th:href="@{/css/yw.css}">
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        写前台效果演示页面。
    </h1>
</section>
<section class="content">
    <div style=" width: 500px; float: left;">
        <table id="leftTabl" class="table table-hover table-striped">
            <tr><td style="width: 30px;">的划分就得换飞姐和东方季道号放假的华府丹郡丰厚的发货单将返回划分的</td><td>aaaa</td></tr>
            <tr><td style="width: 30px;">55565656556565656</td><td>aaaa</td></tr>
        </table>
    </div>

    <div style=" width: 500px;float: left;">
        <table id="leftTab2" class="table table-hover table-striped">
            <tr><td>111</td></tr>
            <tr><td>2222</td></tr>
        </table>
    </div>
</section>
<div th:include="include :: footer"></div>


<script th:inline="javascript">
    $(document).ready(function(e) {
        sameHeight();

    });

 function sameHeight() {
     var i=0;
    $("#leftTabl tr").each(function (){
       var gaodu=$(this).find('td').first().height();
        $("#leftTab2 tr").eq(i).find('td').first().height(gaodu);
        i++;
    });
 }
</script>